<template>
    <wrap :title="title"
          class="tableTemp">
        <div class="tableTemp-heater"
             slot="right"
             v-if="$slots.right">
            <slot name="right"></slot>
        </div>
        <div class="tableTemp-toolbar"
             v-if="info || $slots.extra">
            <div class="tableTemp-info">{{info}}</div>
            <slot name="extra"></slot>
        </div>
        <slot>
            <dbTable :list="list"
                     :column="column"
                     :selection="selection"
                     @getSelectVal="getSelectVal">
                <el-table-column :label="actionTitle"
                                 prop="action"
                                 align="right"
                                 width="150">
                    <template slot-scope="scope">
                        <slot name="table"
                              :props="scope"></slot>
                    </template>
                </el-table-column>
            </dbTable>
        </slot>
        <el-pagination v-if="total"
                       @current-change="changePage"
                       :page-size="pageSize"
                       layout="prev, pager, next, jumper"
                       :total="total"
                       class="tableTemp-dbPage">
        </el-pagination>
    </wrap>
</template>
<script>
import tableData from '@/data/table'
import dbTable from './dbTable'
import wrap from './wrap'

export default {
    name: 'tableTmp',
    props: {
        selection: Boolean, // 是否允许多选
        info: String, // 提示信息
        list: Array, // table数据
        name: String, // table列头对象名
        title: String, // 表格标题
        actionTitle: {
            type: String,
            default: '操作'
        },
        total: { // 分页总条数
            type: Number,
            default: 0
        },
        pageSize: {
            type: Number,
            default: 20
        }
    },
    components: {
        dbTable,
        wrap
    },
    computed: {
        column() {
            return tableData[this.name]
        }
    },
    methods: {
        changePage(curPage) {
            this.$emit('change', curPage)
        },
        getSelectVal(val) {
            this.$emit('getSelectVal', val)
        }
    }
}
</script>
<style lang='less'>
@import '~@/less/variables.less';
@import '~@/less/mixins.less';

.tableTemp {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    &-heater {
        display: flex;
        align-items: center;
    }

    &-toolbar {
        padding: 15px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #f6f6f6;
    }

    &-info {
        color: @gray-1;
        font-size: 14px;
    }

    &-dbPage {
        align-self: flex-end;
        padding: 20px;

        button:hover,
        .el-pager li:hover,
        .el-pager li.active {
            color: #e2534f;
        }

        .el-input.is-active .el-input__inner,
        .el-input__inner:focus {
            border-color: #ddd;
        }
    }
}
</style>
